<!-- <template>
    <div class="map-3d-container" ref="mapRef"></div>
  </template>
  
  <script setup>
  import { ref, onMounted, onBeforeUnmount } from 'vue';
  import * as echarts from 'echarts';
  import 'echarts-gl'; // 引入 ECharts GL 扩展
  import mapJson from "./beijing.json"; // 替换为你的区域 GeoJSON 数据

  
  const mapRef = ref(null);
  let chart = null;
  
  onMounted(() => {
    init3DMap();
  });
  
  onBeforeUnmount(() => {
    if (chart) {
      chart.dispose();
    }
  });
  
  const init3DMap = () => {
    // 注册地图数据
    echarts.registerMap('customArea', mapJson);
  
    // 初始化图表
    chart = echarts.init(mapRef.value);
  
    // 区域数据（A区、B区等的数值和经纬度）
    const regionData = [
      { name: 'A区', value: 23422, coord: [116.444059,39.890038] },
      { name: 'B区', value: 23422, coord:[116.321324,39.875199] }
    ];
  
    const option = {
      series: [
        {
          type: 'map3D',
          map: 'customArea', // 注册的地图名称
          boxHeight: 30, // 地图厚度
          itemStyle: {
            color: '#2196f3', // 地图区域颜色
            borderColor: '#b2ebf2', // 区域边框颜色
            borderWidth: 1,
          },
          label: {
            show: false, // 隐藏区域默认标签（后续通过散点图自定义）
          },
          emphasis: {
            itemStyle: {
              color: '#42a5f5', //  hover 时区域颜色
            },
          },
          light: {
            main: {
              intensity: 1.2,
              shadow: true,
              alpha: 45,
              beta: 10,
            },
            ambient: {
              intensity: 0.5,
            },
          },
          viewControl: {
            projection: 'perspective',
            distance: 150,
            alpha: 30,
            beta: 0,
            panMouseButton: 'left',
            rotateMouseButton: 'right',
          },
        },
        {
          type: 'scatter3D',
          coordinateSystem: 'map3D',
          symbol: 'circle',
          symbolSize: 10,
          itemStyle: {
            color: '#ffeb3b', // 标记点颜色
          },
          label: {
            show: true,
            color: '#ffffff',
            formatter: '{b}\n{c}',
            position: 'top',
          },
          data: regionData.map(item => ({
            name: item.name,
            value: [...item.coord, item.value],
          })),
        },
      ],
    };
  
    chart.setOption(option);
  };
  </script>
  
  <style scoped>
  .map-3d-container {
    width: 300px;
    height: 600px;
  }
  </style> -->
<template>
    <div class="right">
        <div class="topBox">
            <dv-border-box-11 title="本日办件人数与昨日同期分析" :color="['#071334', '#0c698f']">
                <div style="padding:20px;">
                    <!-- 折线图 -->
                    <div class="chartBox">
                        <div id="chartBox" style="width: 100%; height: 210px;"></div>
                    </div>
                </div>
            </dv-border-box-11>
        </div>
        <div class="centerBox">
            <dv-border-box-11 title="累计办件满意度" :color="['#071334', '#0c698f']">
                <div style="padding:20px;display: flex;justify-content: space-between;">
                    <div class="leftPart">
                        <div id="satisfy" style="width: 100%; height: 200px;"></div>
                    </div>
                    <div class="rightPart">
                        <div id="satisfyR" style="width: 100%; height: 200px;"></div>
                    </div>
                </div>
            </dv-border-box-11>
        </div>
        <div class="bottomBox">
            <dv-border-box-11 title="当前热门服务事项TOPS" :color="['#071334', '#0c698f']">
                <div style="padding:20px;display: flex;">
                    <div class="leftBox">
                        <img src="../../../public//ServiceDocument/first.png" alt="">
                        <img src="../../../public//ServiceDocument/second.png" alt="">
                        <img src="../../../public//ServiceDocument/third.png" alt="">
                        <img src="../../../public//ServiceDocument/forth.png" alt="">
                        <img src="../../../public//ServiceDocument/fifth.png" alt="">
                    </div>
                    <div class="rightbox">
                        <div class="bar-chart-container">
                            <div v-for="item in data" :key="item.name" class="bar-item">
                                <div class="item-label">
                                    <span class="item-name">{{ item.name }}</span>

                                </div>
                                <!-- 进度条容器 -->
                                 <div style="display: flex;width: 100%;justify-content: space-between;align-items: center;">
                                    <div class="bar-wrapper">
                                    <div class="bar-progress" :style="{
                                        width: `${(item.value / maxValue) * 100}%`,
                                        // width: `200px`,
                                        height: '10px',
                                        backgroundColor: item.name === '服务事项一' ? '#FFC107' : '#42A5F5'
                                    }">
                                    </div>
                                </div>
                                <div class="item-value">{{ item.value }}%</div>
                                 </div>
                                
                            </div>
                        </div>
                    </div>

                </div>
            </dv-border-box-11>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';
const data = [
    { name: '服务事项一', value: 92 },
    { name: '服务事项二', value: 79 },
    { name: '服务事项三', value: 70 },
    { name: '服务事项四', value: 65 },
    { name: '服务事项五', value: 55 },
]
const maxValue = 100

onMounted(() => {
    // 双折线图
    var chartDom = document.getElementById('chartBox');
    var myChart = echarts.init(chartDom);
    var option;
    const xData = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'];
    const todayData = [5, 5, 20, 22, 35, 25, 30, 35, 25, 20, 10];
    const yesterdayData = [10, 10, 25, 15, 15, 30, 40, 40, 20, 20, 20];
    option = {
        // 图例（本日、昨日）
        legend: {
            top: '10px',
            right: '10px',
            textStyle: {
                color: '#ffffff'
            },
            data: ['本日', '昨日']
        },
        // 网格线
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '15%',
            containLabel: true
        },
        // X轴
        xAxis: {
            type: 'category',
            data: xData,
            axisLine: {
                lineStyle: {
                    color: '#80c0e0' // 浅蓝色坐标轴
                }
            },
            axisLabel: {
                color: '#ffffff'
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            }
        },
        // Y轴
        yAxis: {
            type: 'value',
            min: 0,
            max: 50,
            axisLine: {
                lineStyle: {
                    color: '#80c0e0'
                }
            },
            axisLabel: {
                color: '#ffffff'
            },
            splitLine: {
                lineStyle: {
                    color: '#80c0e0',
                    type: 'dashed' // 虚线网格
                }
            },
            axisTick: {
                show: false
            }
        },
        series: [
            {
                name: '本日',
                type: 'line',
                data: todayData,
                symbol: 'circle', // 圆形标记点
                symbolSize: 8,
                itemStyle: {
                    color: '#ff9800' // 橙色
                },
                lineStyle: {
                    color: '#ff9800',
                    width: 2
                },
                label: {
                    show: false // 不显示数据标签
                }
            },
            {
                name: '昨日',
                type: 'line',
                data: yesterdayData,
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: {
                    color: '#4dd0e1' // 青色
                },
                lineStyle: {
                    color: '#4dd0e1',
                    width: 2
                },
                label: {
                    show: false
                }
            }
        ]
    };
    option && myChart.setOption(option);
    // 满意度环形饼图
    var satisfyChartDom = document.getElementById('satisfy');
    var satisfyChart = echarts.init(satisfyChartDom);
    var satisfyOption;
    satisfyOption = {
        series: [
            {
                type: 'gauge',
                radius: '64%',
                center: ['50%', '50%'],
                startAngle: 225, // 起始角度（从左开始）
                endAngle: -45,     // 结束角度（到右结束）
                min: 0,
                max: 100,
                splitNumber: 5, // 分割段数（0、20、40、60、80、100）
                axisLine: {
                    lineStyle: {
                        width: 20,
                        color: [
                            [0.2, '#f44336'],   // 0-20 红色
                            [0.4, '#ffab00'],   // 20-40 橙色
                            [0.6, '#ba68c8'],   // 40-60 紫色
                            [0.8, '#4dd0e1'],   // 60-80 青色
                            [1, '#8bc34a']      // 80-100 绿色
                        ]
                    }
                },
                axisTick: { show: false },
                splitLine: { show: false },
                axisLabel: {
                    distance: -50,
                    color: '#ffffff',
                    fontSize: 14
                },
                pointer: {
                    length: '60%',
                    width: 6,
                    itemStyle: { color: '#ffffff' }
                },
                title: { show: false },
                detail: { show: false },
                // 中心文字“满意度”
                anchorName: '满意度',
                anchor: {
                    show: true,
                    nameTextStyle: {
                        color: '#ffffff',
                        fontSize: 16
                    },
                    nameLocation: 'bottom',
                    nameDistance: 10
                },
                // 仪表盘数据（指针指向约70的位置，可根据需求调整）
                data: [{ value: 95 }]
            }
        ],
        axisPointer: {
            show: false
        }
    };
    satisfyOption && satisfyChart.setOption(satisfyOption);
    // 满意度环形电量图（右侧）
    var satisfyRChartDom = document.getElementById('satisfyR');
    var satisfyRChart = echarts.init(satisfyRChartDom);
    var satisfyROption;
    satisfyROption = {
        grid: {
            left: '15%',
            right: '5%',
            bottom: '10%',
            top: '10%',
            containLabel: true
        },
        xAxis: {
            show: false
        },
        yAxis: {
            type: 'category',
            data: ['不满意', '基本满意', '非常满意'],
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#ffffff',
                fontSize: 14
            }
        },
        series: [
            {
                type: 'bar',
                data: [10, 30, 90],
                barWidth: 20,
                itemStyle: {
                    color: function (params) {
                        const colors = ['#c44a4f', '#b99ede', '#97b551'];
                        return colors[params.dataIndex];
                    },
                    borderRadius: [0, 5, 5, 0]
                },
                label: {
                    show: true,
                    position: 'right',
                    color: '#ffffff',
                    fontSize: 14,
                    formatter: '{c}%'
                },
                showBackground: true,
                backgroundStyle: {
                    color: '#607d8b'
                }
            }
        ]
    };
    satisfyROption && satisfyRChart.setOption(satisfyROption);
});

</script>

<style lang="scss" scoped>
.right {
    padding: 10px;
    width: 100%;

    .topBox {
        // width:100%;
        width: 532px;
        background-color: #070f2c;

        span {
            font-size: 19px;
        }

        .chartBox {
            margin-top: 40px;
        }
    }

    .centerBox {
        width: 532px;
        background-color: #070f2c;
        margin-top: 20px;

        span {
            font-size: 19px;
        }

        .leftPart {
            width: 100%;
            transform: translateY(15%);
        }

        .rightPart {
            width: 100%;
            transform: translate(-15%, 15%);
        }

    }

    .bottomBox {
        width: 532px;
        background-color: #070f2c;
        margin-top: 20px;
        .leftBox{
            width: 15%;
            display: flex;
            flex-direction: column;
            transform: translate(79%,21%);
            gap: 10px;
            img{
                width: 30px;
                height: 30px;
                margin-bottom: 10px;
            }


        }
        .rightbox {
            width: 85%;
            margin-top: 24px;
        }

        .bar-chart-container {
            padding: 20px;
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .bar-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 10px;
        }

        .item-label {
            width: 100%;
            padding-left: 10px;
        }

        .item-name {
            font-size: 14px;
        }

        .bar-wrapper {
            display: flex;
            width: 100%;
            flex: 1;
            height: 12px;
            background-color: #607D8B;
            border-radius: 6px;
            overflow: hidden;
            margin: 0 10px;
        }

        .bar-progress {
            height: 100%;
            border-radius: 6px;
            transition: width 0.3s ease;
        }

        .item-value {
            font-size: 14px;
        }

    }

}
</style>
